<template>
  <div class="box">
        <div class="head">
            <div class="top">
                <div class="lump"></div>
                <div class="name">汇方圆</div>
                <div class="eat">外卖</div>
            </div>
            <div class="bottom">
                <div class="foot">
                    <div class="foot-img"></div>
                    <div class="foot-name">羊肉串</div>
                </div>
                <div class="foot">
                    <div class="foot-img"></div>
                    <div class="foot-name">长沙臭豆腐</div>
                </div>
            </div>
        </div>
        <div class="appraise">
            <p>本次用餐是否满意?</p>
            <div class="grade">
                <div class="a">
                    <img src="/static/imgs_s09/s09_discontent-yes.png" alt="">
                    <div>不满</div>
                </div>
                <div class="a">
                    <img src="/static/imgs_s09/s09_generic-yes.png" alt="">
                    <div>一般</div>
                </div>
                <div class="a">
                    <img src="/static/imgs_s09/s09_good-yes.png" alt="">
                    <div>满意</div>
                </div>
                <div class="a">
                    <img src="/static/imgs_s09/s09_verygood-yes.png" alt="">
                    <div>超赞</div>
                </div>
            </div>
        </div>
        <div class="input">
            <div class="good">味道很好，值得品尝，用餐环境很棒，超赞！！</div>
            <div class="img">
                <div class="input-img"></div>
                <img src="/static/imgs_s09/s09_add.png" alt="">
            </div>
        </div>
        <div class="footer">发表评价</div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 100%;
            background-color: #ddd;
        }

        .box .head {
            display: flex;
            flex-direction: column;
            height: 160px;
            width: 375px;
            margin-top: 9px;
            background-color: white;
        }

        .head .top {
            display: flex;
            flex-direction: row;
        }

        .top .lump {
            height: 30px;
            width: 30px;
            background: rgba(244, 244, 244, 1);
            margin-left: 11px;
            margin-top: 12px;
        }

        .top .name {
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: rgba(48, 48, 48, 1);
            margin-left: 6px;
            margin-top: 20px;
        }

        .top .eat {
            width: 34px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            background: rgba(241, 145, 73, 1);
            border-radius: 3px;
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-left: 6px;
            margin-top: 22px;
        }

        .head .bottom {
            display: flex;
            flex-direction: row;
        }

        .bottom .foot {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .bottom .foot-img {
            height: 72px;
            width: 72px;
            margin-right: 10px;
            background-color: powderblue;
            margin-left: 10px;
            margin-top: 15px;
            margin-bottom: 6px;
        }

        .bottom .foot-name {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(100, 100, 100, 1);
        }

        .bottom .pillow {
            margin-top: 15px;
            margin-left: 7px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(44, 44, 47, 1);
        }

        .box .appraise {
            height: 115px;
            width: 375px;
            margin-top: 9px;
            background-color: white;
            padding-top: 15px;
        }

        .appraise p {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            text-align: center;
        }

        .appraise .grade img {
            height: 26px;
            width: 26px;
        }

        .appraise .grade .a {
            width: 70px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .appraise .grade {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 21px;
            text-align: center;
        }

        .box .input {
            height: 205px;
            width: 375px;
            background-color: white;
            border-top: 1px solid #ddd;
        }

        .input .good {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            margin-left: 16px;
            margin-top: 17px;
        }

        .input .input-img {
            height: 79px;
            width: 79px;
            margin-right: 10px;
            background-color: brown;
            margin-left: 15px;
        }

        .input img {
            height: 79px;
            width: 79px;
            margin-left: 15px;
        }

        .input .img {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 78px;
        }


        .box .footer {
            width: 347px;
            height: 41px;
            line-height: 41px;
            text-align: center;
            background: rgba(50, 177, 108, 1);
            border-radius: 6px;
            font-size: 15px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            margin-top: 74px;
            margin-left: 14px;
        }
    </style>
